<template>
	<view>
		<view class="box">
			<view class="type-image">
				<view class="title"><text class="red">*</text>执照照片</view>
				<view class="img-con">
					<view class="upload" @click="uploadImg" v-if="imgs.length<9">
						<view class="wlIcon-31paishexuanzhong"></view>
					</view>
					<view class="select-img" v-for="(item,index) in imgs">
						<image :src="item" mode="aspectFill"></image>
						<view class="close" @click="closeImg(index)">
							<view class="wlIcon-shanchu2"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="type-image">
				<view class="title"><text class="red">*</text>资质许可证照片</view>
				<view class="img-con">
					<view class="upload" @click="uploadImg" v-if="imgs.length<9">
						<view class="wlIcon-31paishexuanzhong"></view>
					</view>
					<view class="select-img" v-for="(item,index) in imgs">
						<image :src="item" mode="aspectFill"></image>
						<view class="close" @click="closeImg(index)">
							<view class="wlIcon-shanchu2"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="type-text">
				<view><text class="red">*</text>执照号</view>
				<input type="text" placeholder="请识别您的营业执照号" placeholder-class="mo" />
			</view>
			<view class="type-text">
				<view><text class="red">*</text>经营范围</view>
				<input type="text" placeholder="请输入您的法定经营范围" placeholder-class="mo" />
			</view>
			<view class="type-text">
				<view><text class="red">*</text>店铺/公司名称</view>
				<input type="text" placeholder="请输入店铺名称" placeholder-class="mo" />
			</view>
			<view class="type-text">
				<view><text class="red">*</text>商家电话</view>
				<input type="number" placeholder="请输入上架电话号码" placeholder-class="mo" />
			</view>
			<view class="type-image">
				<view class="title"><text class="red">*</text>经营者身份证正面</view>
				<view class="img-con">
					<view class="upload" @click="uploadImg" v-if="imgs.length<9">
						<view class="wlIcon-31paishexuanzhong"></view>
					</view>
					<view class="select-img" v-for="(item,index) in imgs">
						<image :src="item" mode="aspectFill"></image>
						<view class="close" @click="closeImg(index)">
							<view class="wlIcon-shanchu2"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="type-image">
				<view class="title"><text class="red">*</text>经营者身份证反面</view>
				<view class="img-con">
					<view class="upload" @click="uploadImg" v-if="imgs.length<9">
						<view class="wlIcon-31paishexuanzhong"></view>
					</view>
					<view class="select-img" v-for="(item,index) in imgs">
						<image :src="item" mode="aspectFill"></image>
						<view class="close" @click="closeImg(index)">
							<view class="wlIcon-shanchu2"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="type-image">
				<view class="title"><text class="red">*</text>店内图片</view>
				<view class="img-con">
					<view class="upload" @click="uploadImg" v-if="imgs.length<9">
						<view class="wlIcon-31paishexuanzhong"></view>
					</view>
					<view class="select-img" v-for="(item,index) in imgs">
						<image :src="item" mode="aspectFill"></image>
						<view class="close" @click="closeImg(index)">
							<view class="wlIcon-shanchu2"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="type-select">
				<view class="title"><text class="red">*</text>开始时间</view>
				<picker mode="time" @change="bindStartTimeChange">
					<view class="picker">
						<view class="mo" v-if="startTime==''">请选择营业开始时间</view>
						<view class="select-con" v-else>{{startTime}}</view>
						<view class="wlIcon-fanhui2 icon-next"></view>
					</view>
				</picker>
			</view>
			<view class="type-select">
				<view class="title"><text class="red">*</text>结束时间</view>
				<picker mode="time" @change="bindEndTimeChange">
					<view class="picker">
						<view class="mo" v-if="endTime==''">请选择营结束始时间</view>
						<view class="select-con" v-else>{{endTime}}</view>
						<view class="wlIcon-fanhui2 icon-next"></view>
					</view>
				</picker>
			</view>
			<view class="type-select">
				<view class="title"><text class="red">*</text>所在区域</view>
				<view class="picker" @click="selectMapAddress">
					<view class="mo" v-if="address==''">请选择位置-定位</view>
					<view class="select-con" v-else>{{address}}</view>
					<view class="wlIcon-fanhui2 icon-next"></view>
				</view>
			</view>
			<view class="type-text">
				<view><text class="red">*</text>详细地址</view>
				<input type="text" placeholder="请输入店铺地址" placeholder-class="mo" />
			</view>
			<view class="type-textarea">
				<view class="title"><text class="red">*</text>店铺简介</view>
				<view class="textarea-con">
					<textarea placeholder="请输入店铺简介" placeholder-class="mo"></textarea>
				</view>
			</view>

			<view class="type-text">
				<view><text class="red">*</text>数字Number</view>
				<input type="number" placeholder="请输入" placeholder-class="mo" />
			</view>
			<view class="type-select">
				<view class="title"><text class="red">*</text>选择Select</view>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="picker">
						<view class="mo" v-if="index<0">请选择</view>
						<view class="select-con" v-else>{{array[index]}}</view>
						<view class="wlIcon-fanhui2 icon-next"></view>
					</view>
				</picker>
			</view>

			<view class="type-radio">
				<view class="title"><text class="red">*</text>单选框radio</view>
				<view class="radio-con">
					<view class="radio-box" @click="radioTab(1)">
						<view :class="radioNum==1?'wlIcon-31xuanzhong icon-select':'wlIcon-31xuanzhong icon-mo'"></view>
						<view class="con-text">张三</view>
					</view>
					<view class="radio-box" @click="radioTab(2)">
						<view :class="radioNum==2?'wlIcon-31xuanzhong icon-select':'wlIcon-31xuanzhong icon-mo'"></view>
						<view class="con-text">李四</view>
					</view>
				</view>
			</view>
			<view class="type-checkbox">
				<view class="title"><text class="red">*</text>多选框checkbox</view>
				<view class="checkbox-con">
					<view class="checkbox-box" @click="checkboxTab(index)" v-for="(item,index) in checkbox">
						<view :class="item.state?'wlIcon-31xuanzhong icon-select':'wlIcon-31xuanzhong icon-mo'">
						</view>
						<view class="con-text">{{item.name}}</view>
					</view>
				</view>
			</view>

			<view class="type-video">
				<view class="title"><text class="red">*</text>上传video</view>
				<view class="video-con">
					<view class="upload" @click="uploadVideo">
						<view class="wlIcon-31paishexuanzhong"></view>
					</view>
					<view class="select-video" v-if="video">
						<video :src="video" controls></video>
						<view class="close" @click="closeVideo">
							<view class="wlIcon-shanchu2"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="type-select">
				<view class="title"><text class="red">*</text>选择年月日</view>
				<picker mode="date" @change="bindDateChange">
					<view class="picker">
						<view class="mo" v-if="date==''">请选择</view>
						<view class="select-con" v-else>{{date}}</view>
						<view class="wlIcon-fanhui2 icon-next"></view>
					</view>
				</picker>
			</view>

		</view>
		<view class="null"></view>
		<view class="foot-box" v-if="in_is==1">
			<view class="record" @click="purchaseList">预定记录</view>
			<view class="apply">提交申请</view>
		</view>
		<view class="sub" v-else>提交</view>
	</view>
</template>

<script>
	export default {
		name: "universalForm",
		props: {
			in_is: {
				type: Number,
				value: 0
			},
		},
		data() {

			return {
				array: ['张三', '李四', '王五'],
				index: -1,
				radioNum: 1,
				imgs: [],
				checkbox: [{
					name: '篮球',
					state: false
				}, {
					name: '足球',
					state: false
				}, {
					name: '羽毛球',
					state: false
				}, {
					name: '排球',
					state: false
				}, {
					name: '乒乓球',
					state: false
				}],
				video: '',
				date: '',
				startTime: '',
				endTime: '',
				address: ''
			};
		},
		methods: {
			// 选择器
			bindPickerChange(e) {
				this.index = e.detail.value
			},
			// 单选
			radioTab(num) {
				this.radioNum = num
			},
			checkboxTab(index) {
				this.checkbox[index].state = !this.checkbox[index].state
			},
			// 上传图片
			uploadImg() {
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						console.log(res.tempFilePaths);
						this.imgs = res.tempFilePaths
					}
				})
			},
			// 删除图片
			closeImg(e) {
				this.imgs.splice(e, 1)
			},
			// 上传视频
			uploadVideo() {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePath));
						this.video = res.tempFilePath
					}
				});
			},
			// 删除视频
			closeVideo() {
				this.video = ''
			},
			// 选择年月日
			bindDateChange(e) {
				console.log(e.detail.value)
				this.date = e.detail.value
			},
			bindStartTimeChange(e) {
				this.startTime = e.detail.value
			},
			bindEndTimeChange(e) {
				this.endTime = e.detail.value
			},
			// 地图选点
			selectMapAddress() {
				uni.chooseLocation({
					success: (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.address = res.address
					}
				});
			},
			purchaseList() {
				uni.navigateTo({
					url: `/pages/new/purchaseList/purchaseList`
				})
			},
		}
	}
</script>

<style lang="scss">
	.box {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;

		.type-text {
			width: 630rpx;
			margin-left: 30rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f1f1f1;

			view {
				font-size: 30rpx;
				color: #333333;
			}


			input {
				font-size: 30rpx;
				text-align: right;
			}
		}

		.type-select {
			width: 630rpx;
			margin-left: 30rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f1f1f1;

			.title {
				font-size: 30rpx;
				color: #333333;
			}

			.picker {
				display: flex;
				align-items: center;

				.select-con {
					font-size: 30rpx;
				}

				.icon-next {
					font-size: 26rpx;
					color: #999999;
					margin-left: 6rpx;
				}
			}
		}

		.type-textarea {
			width: 630rpx;
			margin-left: 30rpx;
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 30rpx;

			.title {
				font-size: 30rpx;
				color: #333333;
				line-height: 110rpx;
			}

			.textarea-con {
				width: 630rpx;
				border-radius: 20rpx;
				background-color: #FAFAFA;
				padding: 30rpx 0;

				textarea {
					width: 570rpx;
					height: 200rpx;
					margin-left: 30rpx;
					font-size: 30rpx;
				}
			}
		}

		.type-radio {
			width: 630rpx;
			margin-left: 30rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f1f1f1;

			.title {
				font-size: 30rpx;
				color: #333333;
			}

			.radio-con {
				display: flex;
				align-items: center;

				.radio-box {
					display: flex;
					align-items: center;
					margin-left: 30rpx;

					.icon-mo {
						color: #999999;
						font-size: 34rpx;
					}

					.icon-select {
						color: #84BD00;
						font-size: 34rpx;
					}

					.con-text {
						font-size: 30rpx;
						margin-left: 12rpx;
					}
				}
			}
		}

		.type-checkbox {
			width: 630rpx;
			margin-left: 30rpx;
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 6rpx;

			.title {
				font-size: 30rpx;
				color: #333333;
				line-height: 110rpx;
			}

			.checkbox-con {
				width: 630rpx;
				display: flex;
				flex-wrap: wrap;

				.checkbox-box {
					width: 210rpx;
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.icon-mo {
						color: #999999;
						font-size: 34rpx;
					}

					.icon-select {
						color: #84BD00;
						font-size: 34rpx;
					}

					.con-text {
						font-size: 30rpx;
						margin-left: 12rpx;
					}
				}
			}
		}

		.type-image {
			width: 630rpx;
			margin-left: 30rpx;
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 6rpx;

			.title {
				font-size: 30rpx;
				color: #333333;
				line-height: 110rpx;
			}

			.img-con {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.upload {
					width: 194rpx;
					height: 194rpx;
					border-radius: 20rpx;
					background-color: #FAFAFA;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 24rpx;
					margin-bottom: 24rpx;

					view {
						font-size: 58rpx;
						color: #DBDBDB;
					}
				}

				.select-img {
					width: 194rpx;
					height: 194rpx;
					margin-right: 20rpx;
					position: relative;
					margin-right: 24rpx;
					margin-bottom: 24rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}

					.close {
						position: absolute;
						right: -14rpx;
						top: -14rpx;
						width: 40rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, .3);
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						view {
							color: #fff;
							font-size: 26rpx;
						}
					}
				}

				.select-img:nth-child(3) {
					margin-right: 0rpx;
				}

				.select-img:nth-child(6) {
					margin-right: 0rpx;
				}

				.select-img:nth-child(9) {
					margin-right: 0rpx;
				}
			}
		}

		.type-video {
			width: 630rpx;
			margin-left: 30rpx;
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 6rpx;

			.title {
				font-size: 30rpx;
				color: #333333;
				line-height: 110rpx;
			}

			.video-con {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.upload {
					width: 194rpx;
					height: 194rpx;
					border-radius: 20rpx;
					background-color: #FAFAFA;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 24rpx;
					margin-bottom: 24rpx;

					view {
						font-size: 58rpx;
						color: #DBDBDB;
					}
				}

				.select-video {
					width: 194rpx;
					height: 194rpx;
					margin-right: 20rpx;
					position: relative;
					margin-right: 24rpx;
					margin-bottom: 24rpx;

					video {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}

					.close {
						position: absolute;
						right: -14rpx;
						top: -14rpx;
						width: 40rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, .3);
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						view {
							color: #fff;
							font-size: 26rpx;
						}
					}
				}

			}
		}
	}

	.mo {
		color: #999999;
	}

	.null {
		width: 750rpx;
		height: 200rpx;
	}

	.sub {
		width: 690rpx;
		height: 82rpx;
		border-radius: 50rpx;
		background-color: #84BD00;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 80rpx;
		left: 30rpx;
	}

	.red {
		color: #FF0000;
	}

	.foot-box {
		width: 690rpx;
		height: 82rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 80rpx;
		left: 30rpx;

		.record {
			width: 334rpx;
			height: 82rpx;
			background-color: #fff;
			border: 1px solid #84BD00;
			text-align: center;
			line-height: 82rpx;
			font-size: 30rpx;
			color: #84BD00;
			border-radius: 50rpx;
		}

		.apply {
			width: 334rpx;
			height: 82rpx;
			background: linear-gradient(270deg, #84BD00 0%, #4982EA 100%);
			border: 1px solid #84BD00;
			text-align: center;
			line-height: 82rpx;
			font-size: 30rpx;
			color: #fff;
			border-radius: 50rpx;
		}
	}
</style>